<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
</head>
<body>
	<ul id="ulone">
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
		<li>555</li>
	</ul>
    <ol>
    	<li>666</li>
        <li>666</li>
        <li>666</li>
        <li>666</li>
    </ol>
	<div id="div1">
    	<h2>33</h2>
        <span>11</span>
        <p id="sonp">22</p>
        <h1>33</h1>
	</div>
</body>
<script type="text/javascript">
/*
	//一定是document
	getElementById();
	getElementsByName();
	
	可以是document,也可以是闭合标签
	getElementsByTagName();
*/
var li=document.getElementById('ulone').getElementsByTagName('li');
//var li=document.getElementsByTagName('ul')[0].getElementsByTagName('li');
//var li=document.getElementsByTagName('li');
//alert(li.length);
//两种写法：alert(li[0]);alert(li.item(0));

for(var i=0;i<li.length;i++){
	li[i].onmouseover=function(){
		this.style.background="red";
	}
	li[i].onmouseout=function(){
		this.style.background="#fff";	
	}
}



//调用删除空白节点
cleanWhitespace(document.getElementById('div1'));


//获取第一个子节点
var fc = document.getElementById('div1').firstChild;		//对象
//获取最后一个子节点
var lc = document.getElementById('div1').lastChild;			//对象
//获取子节点
var cn = document.getElementById('div1').childNodes[0];		//数组
//获取子节点
var cd = document.getElementById('div1').children[0];		//数组
//alert(fc.tagName);
//alert(lc.tagName);
//alert(cn.tagName);
//alert(cd.tagName);


//获取父节点
var sp = document.getElementById('sonp').parentNode;		//对象
//alert(sp.tagName);

//获取上一个兄弟节点
var pe = document.getElementById('sonp').previousSibling;	//对象
//alert(pe.tagName);

//获取下一个兄弟节点
var ne = document.getElementById('sonp').nextSibling;		//对象
//alert(ne.tagName);


//删除节点
function cleanWhitespace(element){
	for(var i=0; i < element.childNodes.length; i++){
		  var node = element.childNodes[i];
		  //判断是否是空白节点，如果是则删除该节点
		  if(node.nodeType == 3 && !/\S/.test(node.nodeValue)){
			node.parentNode.removeChild(node);
		  }
	}
}
//火狐，谷歌会默认有空白节点，所以要删除做兼容，IE不会读取空白节点
//objsibling = obj.nextElementSibling || obj.nextSibling;  //这里做了一个JS的兼容处理
</script>
</html>